<template>
  <div class="min-h-screen relative overflow-hidden bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <!-- 动态背景装饰 - 优化了位置和大小，增加深度感 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-1/4 left-1/5 w-40 h-40 md:w-64 md:h-64 border-2 border-blue-200/30 rounded-full opacity-30 rotate-animation"></div>
      <div class="absolute bottom-1/3 right-1/4 w-60 h-60 md:w-80 md:h-80 border border-purple-200/30 rounded-full opacity-20 rotate-animation animation-delay-1000"></div>
      <div class="absolute top-1/2 right-1/5 w-20 h-20 md:w-32 md:h-32 border-2 border-cyan-200/30 rounded-lg opacity-40 float-animation"></div>
    </div>

    <!-- Hero 区域 - 优化了间距和响应式表现 -->
    <section class="min-h-[70vh] flex items-center justify-center relative pt-16">
      <div class="container mx-auto px-4 flex flex-col items-center text-center">
        <!-- Logo动画 -->
        <div class="w-32 h-32 md:w-40 md:h-40 relative mb-8 float-animation">
          <img src="@/assets/logo.png" alt="海龟汤Logo" class="w-full h-full object-contain">
          <div class="absolute -right-2 -top-2 w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white text-xl animate-bounce">
            <i class="fa fa-question"></i>
          </div>
        </div>
        
        <!-- 主标题 - 优化了响应式字体大小和行高 -->
        <h1 class=" pb-1 text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text max-w-3xl">
          猜不透的情境推理游戏
        </h1>
        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-10 max-w-2xl">
          通过提问探索真相，考验你的逻辑与想象力，AI实时互动让推理过程更有趣
        </p>
        
        <!-- 行动按钮 - 优化了尺寸和交互效果 -->
        <div class="flex gap-4 flex-wrap justify-center">
          <button @click="startGame" 
            class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all font-medium text-base">
            <i class="fa fa-play-circle mr-2"></i>立即开始
          </button>
          <button @click="showExample" 
            class="px-8 py-4 border-2 border-primary text-primary rounded-xl hover:bg-primary/10 transition-all font-medium text-base">
            <i class="fa fa-lightbulb-o mr-2"></i>查看示例
          </button>
        </div>
        
        <!-- 新增统计数据，增强社会证明 -->
        <div class="flex gap-8 mt-12">
          <div class="text-center">
            <div class="text-3xl font-bold text-primary">10k+</div>
            <div class="text-gray-500 text-sm">汤面题库</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-primary">100k+</div>
            <div class="text-gray-500 text-sm">活跃玩家</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-primary">4.9</div>
            <div class="text-gray-500 text-sm">用户评分</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 游戏介绍区 - 优化了卡片设计和间距 -->
    <section class="py-20 bg-white dark:bg-gray-800/50">
      <div class="container mx-auto px-4">
        <!-- 增加区域标题，提升层次 -->
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold mb-4">什么是海龟汤？</h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">一款考验逻辑思维和想象力的情境推理游戏，通过提问来探索事件的真相</p>
        </div>
        
        <!-- 游戏定义 - 优化了卡片样式和交互效果 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300 border border-gray-100 dark:border-gray-700">
            <div class="text-4xl mb-6">🤔</div>
            <h3 class="text-xl font-bold mb-3">游戏简介</h3>
            <p class="text-gray-600 dark:text-gray-300">
              一种情境推理游戏，通过提问获取线索，最终推理出真相的智力挑战。
            </p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300 border border-gray-100 dark:border-gray-700">
            <div class="text-4xl mb-6">💭</div>
            <h3 class="text-xl font-bold mb-3">如何游玩</h3>
            <p class="text-gray-600 dark:text-gray-300">
              通过封闭式问题（是/否/无关）逐步接近真相，训练逻辑思维与推理能力。
            </p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 duration-300 border border-gray-100 dark:border-gray-700">
            <div class="text-4xl mb-6">🎯</div>
            <h3 class="text-xl font-bold mb-3">特色亮点</h3>
            <p class="text-gray-600 dark:text-gray-300">
              AI实时回答，丰富题库，社交排行，让推理更有趣，还能锻炼你的逻辑思维。
            </p>
          </div>
        </div>

        <!-- 玩法步骤 - 优化了步骤展示和响应式布局 -->
        <div class="flex flex-col items-center mb-16">
          <h2 class="text-3xl font-bold mb-10">游戏流程</h2>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full max-w-5xl">
            <div v-for="(step, index) in gameSteps" :key="index"
              class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all border border-gray-100 dark:border-gray-700">
              <div class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-secondary text-white flex items-center justify-center text-xl font-bold mb-5">
                {{ index + 1 }}
              </div>
              <h3 class="font-medium mb-3 text-center">{{ step.title }}</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400 text-center">{{ step.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能区 - 优化了布局和交互体验 -->
    <section class="py-20 bg-gray-50 dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <!-- 汤面库预览 - 优化了标签和卡片设计 -->
        <div class="mb-20">
          <h2 class="text-3xl font-bold mb-8 flex items-center">
            <i class="fa fa-book text-primary mr-2"></i>探索汤面库
          </h2>
          <div class="flex flex-wrap gap-3 mb-6">
            <button v-for="tag in tags" :key="tag"
              class="px-5 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105"
              :class="activeTag === tag ? 'bg-primary text-white shadow-md' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'">
              {{ tag }}
            </button>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="soup in previewSoups" :key="soup.id"
              class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow hover:shadow-lg transition-all cursor-pointer transform hover:-translate-y-1 duration-300 border border-gray-100 dark:border-gray-700">
              <div class="flex items-start justify-between mb-3">
                <span class="px-3 py-1 text-xs rounded-full font-medium"
                  :class="getDifficultyClass(soup.difficulty)">
                  {{ soup.difficulty }}
                </span>
                <span class="text-sm text-gray-500 flex items-center">
                  <i class="fa fa-users mr-1"></i>{{ soup.players }}人玩过
                </span>
              </div>
              <h3 class="font-semibold text-lg mb-2">{{ soup.title }}</h3>
              <p class="text-sm text-gray-500 line-clamp-2 mb-4">{{ soup.preview }}</p>
              <button class="text-primary text-sm font-medium hover:underline">开始推理 →</button>
            </div>
          </div>
          
          <!-- 新增查看更多按钮 -->
          <div class="text-center mt-10">
            <button class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors font-medium">
              查看更多汤面 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
        </div>

        <!-- 排行榜 - 优化了样式和颜色一致性 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-100 dark:border-gray-700">
          <h2 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fa fa-trophy text-amber-500 mr-2"></i>本周推理达人
          </h2>
          <div class="space-y-3">
            <div v-for="(user, index) in topUsers" :key="user.id"
              class="flex items-center gap-4 p-4 rounded-lg transition-all hover:shadow-md"
              :class="index === 0 ? 'bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800/30' : 
                      index === 1 ? 'bg-gray-50 dark:bg-gray-700/30' : 
                      index === 2 ? 'bg-orange-50 dark:bg-orange-900/20' : 
                      'bg-gray-50 dark:bg-gray-700/30'">
              <span class="font-bold w-6 text-center">
                <span :class="index < 3 ? 'text-amber-500' : ''">{{ index + 1 }}</span>
              </span>
              <img :src="user.avatar" :alt="user.name" 
                class="w-12 h-12 rounded-full object-cover border-2 border-gray-100 dark:border-gray-700">
              <div class="flex-1">
                <div class="font-medium">{{ user.name }}</div>
                <div class="text-sm text-gray-500">解题数：{{ user.solved }} · 正确率：{{ user.accuracy }}%</div>
              </div>
              <div class="text-right">
                <div class="font-bold text-primary">{{ user.rank }}</div>
                <div class="text-xs text-gray-500">积分</div>
              </div>
            </div>
          </div>
          
          <!-- 新增查看完整排行榜按钮 -->
          <div class="mt-6 text-right">
            <button class="text-primary text-sm hover:underline font-medium">
              查看完整排行榜 <i class="fa fa-angle-right ml-1"></i>
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 新增用户评价区，增强社会证明 -->
    <section class="py-20 bg-white dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl font-bold mb-4">玩家怎么说</h2>
          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">来自真实玩家的体验反馈</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
          <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-xl">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/id/1/50/50" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
              <div>
                <div class="font-medium">张同学</div>
                <div class="text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm">
              "超好玩的推理游戏，AI反应很快，题目也很有创意，每天都会来玩几局放松一下大脑。"
            </p>
          </div>
          <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-xl">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/id/2/50/50" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
              <div>
                <div class="font-medium">李同学</div>
                <div class="text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm">
              "和朋友一起玩特别有意思，排行榜功能很激励人，已经连续打卡一个月了！"
            </p>
          </div>
          <div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-xl">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/id/3/50/50" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
              <div>
                <div class="font-medium">王同学</div>
                <div class="text-amber-500 text-sm">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-o"></i>
                </div>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm">
              "题目难度适中，很适合锻炼逻辑思维，希望能增加更多类别和社交功能。"
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部信息 - 优化了布局和内容 -->
    <footer class="bg-gray-900 text-gray-300">
      <div class="container mx-auto px-4 py-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          <div>
            <div class="flex items-center gap-2 mb-4">
              <img src="@/assets/logo.png" alt="海龟汤Logo" class="w-8 h-8 ">
              <span class="font-bold text-lg text-white">海龟汤AI</span>
            </div>
            <p class="text-sm text-gray-400 mb-4">
              一款有趣的情境推理游戏，通过提问探索真相，锻炼你的逻辑思维能力。
            </p>
            <div class="flex gap-4">
              <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-weibo"></i></a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-wechat"></i></a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-qq"></i></a>
            </div>
          </div>
          <div>
            <h4 class="font-bold text-white mb-4">快速链接</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">题库</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">排行榜</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
            </ul>
          </div>
          <div>
            <h4 class="font-bold text-white mb-4">用户条款</h4>
            <ul class="space-y-2 text-sm">
              <li><a href="#" @click.prevent="showUserAgreement = true" class="text-gray-400 hover:text-white transition-colors">用户协议</a></li>
              <li><a href="#" @click.prevent="showPrivacyPolicy = true" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
            </ul>
          </div>
          <div>
            <h4 class="font-bold text-white mb-4">联系我们</h4>
            <ul class="space-y-3 text-sm">
              <li class="flex items-center"><i class="fa fa-phone mr-2 text-gray-500"></i>400-1234567</li>
              <li class="flex items-center"><i class="fa fa-envelope mr-2 text-gray-500"></i>123456789@qq.com</li>
              <li class="flex items-center"><i class="fa fa-map-marker mr-2 text-gray-500"></i>北京市海淀区</li>
            </ul>
          </div>
        </div>
        <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
          <p>© 2024 海龟汤 AI. All rights reserved.</p>
        </div>
      </div>
    </footer>

    <!-- 示例汤面弹窗 - 完善了内容 -->
    <div v-if="showExampleModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold">示例汤面</h3>
          <button @click="showExampleModal = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <!-- 示例内容 -->
        <div class="space-y-6">
          <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
            <h4 class="font-bold mb-2">汤面：</h4>
            <p>一个男人走进酒吧，向酒保要了一杯水。酒保却突然拿出一把枪指着他。男人愣了一下，随后说了声"谢谢"就离开了。</p>
          </div>
          
          <div class="space-y-4">
            <h4 class="font-bold">推理过程示例：</h4>
            
            <div class="bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="flex justify-between mb-2">
                <span class="text-sm font-medium">玩家：</span>
                <span class="text-sm text-gray-500">男人是不是在抢劫？</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm font-medium text-primary">AI：</span>
                <span class="text-sm">否</span>
              </div>
            </div>
            
            <div class="bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="flex justify-between mb-2">
                <span class="text-sm font-medium">玩家：</span>
                <span class="text-sm text-gray-500">男人是不是有什么疾病？</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm font-medium text-primary">AI：</span>
                <span class="text-sm">是</span>
              </div>
            </div>
            
            <div class="bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="flex justify-between mb-2">
                <span class="text-sm font-medium">玩家：</span>
                <span class="text-sm text-gray-500">是不是和打嗝有关？</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm font-medium text-primary">AI：</span>
                <span class="text-sm">是</span>
              </div>
            </div>
          </div>
          
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
            <h4 class="font-bold mb-2">汤底：</h4>
            <p>男人当时正在打嗝，他想要一杯水来缓解。酒保用枪吓他一跳，反而治好了他的打嗝，所以他说了声"谢谢"就离开了。</p>
          </div>
          
          <button @click="showExampleModal = false" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium">
            我明白了，开始游戏
          </button>
        </div>
      </div>
    </div>

    <!-- 用户协议弹窗 -->
    <div v-if="showUserAgreement" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold">用户协议</h3>
          <button @click="showUserAgreement = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="space-y-4 text-gray-600 dark:text-gray-300">
          <h4 class="font-bold">1. 服务条款</h4>
          <p>欢迎使用海龟汤AI推理游戏平台。使用本平台即表示您同意以下条款：</p>
          <ul class="list-disc pl-5 space-y-2">
            <li>用户需要遵守相关法律法规</li>
            <li>禁止发布违法、违规、色情、暴力等不良内容</li>
            <li>尊重知识产权，不得侵犯他人权益</li>
            <li>遵守游戏规则，维护良好的游戏环境</li>
          </ul>
          <!-- 更多协议内容 -->
        </div>
        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
          <button @click="showUserAgreement = false" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium">
            我已阅读并同意
          </button>
        </div>
      </div>
    </div>

    <!-- 隐私政策弹窗 -->
    <div v-if="showPrivacyPolicy" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold">隐私政策</h3>
          <button @click="showPrivacyPolicy = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="space-y-4 text-gray-600 dark:text-gray-300">
          <h4 class="font-bold">1. 信息收集</h4>
          <p>我们收集的信息包括：</p>
          <ul class="list-disc pl-5 space-y-2">
            <li>账户信息（用户名、密码等）</li>
            <li>游戏数据（游戏记录、成就等）</li>
            <li>设备信息（仅用于优化服务）</li>
          </ul>
          <h4 class="font-bold">2. 信息使用</h4>
          <p>我们承诺：</p>
          <ul class="list-disc pl-5 space-y-2">
            <li>严格保护用户隐私</li>
            <li>不会向第三方泄露个人信息</li>
            <li>仅用于服务优化和体验提升</li>
          </ul>
          <!-- 更多隐私政策内容 -->
        </div>
        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
          <button @click="showPrivacyPolicy = false" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium">
            我已阅读并同意
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const showExampleModal = ref(false)
const activeTag = ref('热门')
const showUserAgreement = ref(false)
const showPrivacyPolicy = ref(false)

// 游戏步骤数据
const gameSteps = [
  { title: '选择汤面', desc: '从题库中挑选感兴趣的情境' },
  { title: '提出问题', desc: '用封闭式问题获取线索' },
  { title: '推理真相', desc: '根据AI回答逐步逼近答案' },
  { title: '查看汤底', desc: '验证你的推理是否正确' }
]

// 标签数据
const tags = ['热门', '最新', '简单', '中等', '困难', '悬疑', '搞笑']

// 预览汤面数据 - 补充完整数据
const previewSoups = [
  {
    id: 1,
    title: '酒吧里的枪声',
    preview: '一个男人走进酒吧要了一杯水，酒保却拿出一把枪...',
    difficulty: '简单',
    players: 1280
  },
  {
    id: 2,
    title: '床下的东西',
    preview: '一个女人害怕床下有东西，打开灯后却安心了...',
    difficulty: '中等',
    players: 956
  },
  {
    id: 3,
    title: '沙漠中的尸体',
    preview: '沙漠中有一具尸体，手里拿着一根火柴...',
    difficulty: '困难',
    players: 723
  }
]

// 排行榜数据 - 补充完整数据
const topUsers = [
  {
    id: 1,
    name: '推理王',
    avatar: 'https://picsum.photos/id/10/50/50',
    solved: 128,
    accuracy: 92,
    rank: 5872
  },
  {
    id: 2,
    name: '逻辑大师',
    avatar: 'https://picsum.photos/id/11/50/50',
    solved: 115,
    accuracy: 89,
    rank: 5641
  },
  {
    id: 3,
    name: '解谜达人',
    avatar: 'https://picsum.photos/id/12/50/50',
    solved: 103,
    accuracy: 87,
    rank: 5429
  },
  {
    id: 4,
    name: '真相探索者',
    avatar: 'https://picsum.photos/id/13/50/50',
    solved: 98,
    accuracy: 85,
    rank: 5215
  }
]

// 获取难度样式 - 优化颜色系统
const getDifficultyClass = (difficulty) => {
  const classes = {
    '简单': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
    '中等': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    '困难': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
  }
  return classes[difficulty] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
}

// 开始游戏
const startGame = () => {
  router.push('/game')
}

// 显示示例
const showExample = () => {
  showExampleModal.value = true
}
</script>

<style scoped>
/* 动画相关样式 - 优化动画效果 */
.rotate-animation {
  animation: rotate 25s linear infinite;
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.animation-delay-1000 {
  animation-delay: 1s;
}

/* 渐变边框 */
.gradient-border {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  padding: 1px;
}

/* 文本渐变 */
.gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  color: transparent;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}
</style>
